<template>
	<view class="attention">
		<!-- tabs -->
		<view class="tabs">
			<u-tabs activeStyle="color:#4974fa" lineWidth="180rpx" lineColor="#4974fa" :list="tabsData" :scrollable="false" @click="(i)=>followlList.current=i.index" ></u-tabs>
		</view>
		<!-- 列表 -->
		<view class="lists" v-if="followlList.list.length>0">
			<followCard :data="item" v-for="item in followlList.list" :key="item.id"></followCard>
		</view>
		<!-- 为空 -->
		<u-empty v-if="followlList.list.length==0" mode="history" icon="https://cdn.uviewui.com/uview/empty/history.png"></u-empty>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref, watchEffect } from "vue";
import { follow_listReq } from "../../api/user";
import {useStore} from 'vuex'
	//vuex
	 const store=useStore()
	//tabs数据
	 const tabsData=reactive([
		 {name:'关注我的'},
		 {name:'我关注的'},
		 {name:'谁看过我'},
		 {name:'我看过谁'},
	 ])
	 // 关注相关列表
	 const followlList=reactive({
		 list:[],
		 current:"0"
	 })
	//请求关注列表
	 const getFollow_list=async()=>{
		 let type=followlList.current
		 let res=await follow_listReq({type})
		 followlList.list=res.data.data.list
	 }
	watchEffect(()=>{
		getFollow_list()
	})
</script>

<style lang="scss">
	.attention{
		background: #f6f6f6;
		height: 100vh;
		.tabs{
			background: #fff;
		}
		.lists{
			margin-top: 10rpx;
		}
	}
</style>
